<!DOCTYPE html>
<html>
<head>
    <title>选择班级</title>
    <meta name="keywords" content=""/>
    <meta name="description" content="">
    <include file="public@head"/>
    <link href="__TMPL__/public/html_assets/css/seatcss.css" rel="stylesheet">
</head>
<style>
    div.seatCharts-row {
        height: 25px;
    }

    div.seatCharts-seat {
        width: 20px;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
    }

    div.seatCharts-cell {
        font-weight: bold;
        height: 20px;
        width: 20px;
        border-radius: 100%;
        line-height: 20px;
        margin: 4px;
        text-align: center;
        display: inline-block;
        outline: none;
        font-size: 10px;
    }

    .seatCharts-legendItem {
        width: 80px;
        margin-bottom: 20px;
        float: left;
    }

    .seatCharts-legendItem div {
        float: left;
    }

    .seatCharts-legendItem span {
        font-size: 12px;
        line-height: 25px;
        height: 25px;
    }
</style>
<body class="body-white">
<include file="public@nav"/>


<!--当前位置 -->
<div class="path wrap">
    <a href="{:url('portal/index/index')}">学悦教育</a> <i>-</i> <a href="{:url('order/order/select_lesson')}">课程体系</a>
    <i>-</i> <a href="#">{$course_name.course_name}</a>
</div>
<!--当前位置 -->
<div class="clear"></div>

<!--班级介绍 -->
<div class="class-introduce wrap">

    <!--图片 -->
    <div class="pic">
        <a href="#">
            <em></em>
            <span>
                        <img src="/upload/{$course_name.file_path}"/>
                    </span>
        </a>
    </div>
    <!--图片 -->

    <!--介绍 -->
    <div class="introduce">
        <h1>
            {$course_date.course_name}
        </h1>
        <dl>
            <dt><em>课程简介</em></dt>
            <dd>{$course_date.summary}</dd>
        </dl>
        <dl>
            <dt><em>培养目标</em></dt>
            <dd>
                {$course_date.description}
            </dd>
        </dl>
        <!--<dl>-->
        <!--<dt><em>适合对象</em></dt>-->
        <!--<dd>-->
        <!--<p>五年级</p>-->
        <!--</dd>-->
        <!--</dl>-->
        <dl>
            <dt><em>课程时长</em></dt>
            <dd>
                <p>{$course_date.course_hour}个课时</p>
            </dd>
        </dl>
    </div>
    <!--介绍 -->

</div>
<!--班级介绍 -->

<div class="clear"></div>

<!--选择校区 -->
<div class="class-campus wrap">

    <!--切换 -->
    <div class="hd">
        <h2>选择校区</h2>
        <ul>
            <foreach name="school_date" item="vo">
                <if condition="isset($school_id) && $school_id eq $vo.id">
                    <li class="selected">
                        <a href="{:url('order/ajax_select_ban',array('school_id'=>$vo.id,'course_id'=>$course_id))}"
                           class="changeSchool">
                            {$vo.name}
                        </a>
                    </li>
                    <else/>
                    <li>
                        <a href="{:url('order/ajax_select_ban',array('school_id'=>$vo.id,'course_id'=>$course_id))}"
                           class="changeSchool">
                            {$vo.name}
                        </a>
                    </li>
                </if>
            </foreach>
        </ul>
    </div>
    <!--切换 -->

    <div id="class_list">
        <!--内容 -->
        <div class="bd">
            <ul>
                <foreach name="data" item="vo">
                    <!--杨浦 -->
                    <if condition="$vo.visible_type==0">
                        <li>
                            <div class="info">
                                <h3>{$vo.name}</h3>
                                <span class="text">
						<p><i>&#xe748;</i> <em>上课日期：{$vo.first_day}-{$vo.end_day}　{$vo.class_start_week}</em></p>
						<p><i>&#xe603;</i> <em>地点：{$vo.address}</em></p>
						<p><i>&#xe600;</i> <em>
                            <if condition="$vo.is_teacher_visible eq 1">
                                教师：{$vo.user_login}
                                <else/>
                                教师：高级教师待定
                            </if>

                        </em></p>
					</span>
                            </div>
                            <div class="other">
                                <span class="price">{$vo.total_price}</span>
                                <span class="class">
                        <a data-id="{$vo.id}">
                            预览座位
                        </a>
                    </span>
                                <span class="class">
                                <div class="btns" >
                        <if condition="$vo.start_lesson_time lt time() && $vo.current_num neq $vo.total_num ">
                                <a href="{:url('order/order/order_list',array('class_id'=>$vo.id,'cha_id'=>1))}"
                                   class="bm">插班</a>
                                 <if condition="$vo.is_listen eq 1">
                                     <a href="{:url('order/order/isListen',array('class_id'=>$vo.id,'is_listen'=>1,'student_status'=>7))}"
                                        class="bm">试听</a>
                                 </if>
                        <elseif condition="($vo.current_num eq $vo.total_num) || ($vo.current_num gt $vo.total_num) ">
                          <a href="javascript:;" class="bm">满员</a>
                            <a href="{:url('order/order/pre_class',array('course_id'=>$course_id))}" class="bm">预选课</a>
                        </elseif>
                        <else/>
                            <if condition="$vo.signup_start gt time()">
                                    <a href="javascript:" class="bm" disabled data-msg="没有开始报名呢！！">
                                        报名{:date('m-d ',$vo.signup_start)}
                                    </a>
                                <else/>
                                <a href="{:url('order/order/order_list',array('class_id'=>$vo.id,'cha_id'=>0))}"
                                   class="bm">报名</a>
                            </if>
                        </if>
					</div>
                                    </span>
                            </div>
                        </li>
                        <elseif condition="$vo.visible_type==1 && $pre_count gt 0">
                            <li>
                                <div class="info">
                                    <h3>{$vo.name}</h3>
                                    <span class="text">
						<p><i>&#xe748;</i> <em>上课日期：{$vo.first_day}-{$vo.end_day}　{$vo.class_start_week}</em></p>
						<p><i>&#xe603;</i> <em>地点：{$vo.address}</em></p>
						<p><i>&#xe600;</i> <em>
                            <if condition="$vo.is_teacher_visible eq 1">
                                教师：{$vo.user_login}
                                <else/>
                                教师：高级教师待定
                            </if>
                        </em></p>
					</span>
                                </div>
                                <div class="other">
                                    <span class="price">2200</span>
                                    <span class="class">
                        <a data-id="{$vo.id}">
                            预览座位
                        </a>
                    </span>
                                    <span class="class">
                                    <div class="btns" >
                        <if condition="$vo.start_lesson_time lt time() && $vo.current_num neq $vo.total_num ">
                            <a href="{:url('order/order/order_list',array('class_id'=>$vo.id,'cha_id'=>1))}" class="bm">插班</a>
                            <if condition="$vo.is_listen eq 1">
                                <a href="{:url('order/order/isListen',array('class_id'=>$vo.id,'is_listen'=>1,'student_status'=>7))}"
                                   class="bm">试听</a>
                            </if>
                            <elseif condition="($vo.current_num eq $vo.total_num) || ($vo.current_num gt $vo.total_num) ">
                                <a href="javascript:;" class="bm">满员</a>
                                <a href="{:url('order/order/pre_class',array('course_id'=>$course_id))}"
                                   class="bm">预选课</a>
                            </elseif>
                            <else/>
                            <if condition="$vo.signup_start gt time()">
                                <a href="javascript:" class="bm" disabled data-msg="没有开始报名呢！！">
                                    报名{:date('m-d ',$vo.signup_start)}
                                </a>
                                <else/>
                                <a href="{:url('order/order/order_list',array('class_id'=>$vo.id,'cha_id'=>0))}"
                                   class="bm">报名</a>
                            </if>
                        </if>
					</div>
                                        </span>
                                </div>
                            </li>
                        </elseif>
                        <elseif condition="$vo.visible_type==3 && $is_pre gt 0">
                            <li>
                                <div class="info">
                                    <h3>{$vo.name}</h3>
                                    <span class="text">
						<p><i>&#xe748;</i> <em>上课日期：{$vo.first_day}-{$vo.end_day}　{$vo.class_start_week}</em></p>
						<p><i>&#xe603;</i> <em>地点：{$vo.address}</em></p>
						<p><i>&#xe600;</i> <em>
                            <if condition="$vo.is_teacher_visible eq 1">
                                教师：{$vo.user_login}
                                <else/>
                                教师：高级教师待定
                            </if>

                        </em></p>
					</span>
                                </div>
                                <div class="other">
                                    <span class="price">2200</span>
                                    <span class="class">
                        <a data-id="{$vo.id}">
                            预览座位
                        </a>
                    </span>
                                    <span class="class">
                                    <div class="btns">
                        <if condition="$vo.start_lesson_time lt time() && $vo.current_num neq $vo.total_num">
                            <a href="{:url('order/order/order_list',array('class_id'=>$vo.id,'cha_id'=>1,'student_status'=>6))}"
                               class="bm">插班</a>
                            <elseif condition="$vo.current_num eq $vo.total_num || $vo.current_num gt $vo.total_num">
                                <a href="javascript:;" class="bm">满员</a>
                                <a href="{:url('order/order/pre_class',array('course_id'=>$course_id))}"
                                   class="bm">预选课</a>

                            </elseif>
                            <else/>
                                <if condition="$vo.signup_start gt time()">
                                    <a href="#" class="bm" data-msg="没有开始报名呢！！">
                                        报名{:date('m-d ',$vo.signup_start)}
                                    </a>
                                    <else/>
                                    <a href="{:url('order/order/order_list',array('class_id'=>$vo.id,'cha_id'=>0,'student_status'=>6))}"
                                       class="bm">报名</a>
                                </if>
                        </if>
					</div>
                                    </span>
                                </div>
                            </li>
                        </elseif>
                        <else/>

                    </if>
                </foreach>
                <empty name="data">
                    <div class="text-center">
                        <h3>暂无班级</h3>
                    </div>
                </empty>
            </ul>
        </div>
        <!--内容 -->
        <div class="pagination">{$page|default=''}</div>
    </div>


</div>
<!--选择校区 -->

<div id="preview_seat" style="display: none;font-family:iconfont;">
    <!--选座位 -->
    <div class="order-seat" style="width: 100%;">
        <!--黑板 -->
        <div class="blackboard">
            <img src="__TMPL__/public/html_assets/images/heiban.jpg" />
        </div>
        <!--黑板 -->
        <!--座位 -->
        <div id="seat-map">

        </div>

        <!--座位 -->
    </div>
    <div id="legend">

    </div>
</div>


<include file="public@scripts"/>
<include file="public@footer"/>
<script type="text/javascript" src="__STATIC__/js/admin.js"></script>
<script src="__STATIC__/js/jquery.seat-charts.min.js"></script>

<script>
    jQuery(".class-campus ").slide({});
    $(function () {
        //预览座位
        $('body').on('click', '.class>a', function () {
            var $classId = $(this).data('id');
            $.ajax({
                url: '{:url("order/order/preview_seat")}',
                type: 'get',
                data: {'class_id': $classId},
                success: function (data) {
                    $('#seat-map').remove();
                    var seatmap = $('<div/>').attr('id','seat-map').attr('id','seat-map');
                    $('.order-seat').append(seatmap);
                    $('#legend').empty();

                    data = JSON.parse(data);
                    set_seat(data[0]);
                    set_column();

                    $('.seatCharts-seat').html('&#xe612;');
                    layer.open({
                        type: 1,
//                        btn:'确定',
                        title: '预览班级座位',
                        content: $('#preview_seat'),
                        yes: function () {
                            $('#seat-map').remove();
                        }
                    });
                },
                error: function () {
                    console.log('eoor');
                }
            })
        })

        //异步选择校区
        $(".changeSchool").click(function (e) {
            e.preventDefault();
            var loading = layer.load(0, {shade: false});
            $(this).parent().addClass("selected").siblings().removeClass("selected");
            var url = $(this).attr("href");
            $.get(url, function (data) {
                $("#class_list").html(data);
                layer.close(loading);
            });
        });
    });

    //   设置列数为字母
    function set_column() {
        var obj = $('.seatCharts-header>.seatCharts-cell:not(:first)');
        var length = obj.length;
        for (var i = 0; i < length; i++) {
            if (obj[i].innerHTML > 26) {
                console.log('超出最大列数Z(26)');
                return false;
            } else {
                obj[i].innerHTML = String.fromCharCode(parseInt(obj[i].innerHTML) + 64);
            }
        }
    }

    //设置座位
    function set_seat(data) {
        var row = data['rows'];
        var column = data['cols'];
        var aisle = data['aisle'];
        if (aisle) aisle = aisle.split(',');
        var vip = data['vip'];
        if (vip) vip = vip.split(',');
        var student_seat = data['student_seat'];
        if (student_seat) student_seat = student_seat.split(',');
        var reserved_seats = data['reserved_seats'];
        if (reserved_seats) reserved_seats = reserved_seats.split(',');
        var new_map = [];

        if (row && column) {
            //根据行列初步生成座位表的map
            for (var i = 0; i < row; i++) {
                new_map[i] = '';
                for (var j = 0; j < column; j++) {
                    new_map[i] += 'a';
                }
            }
        }
        sc = $('#seat-map').seatCharts({
            map: new_map,
            naming: {
                top: true,
                getLabel: function (character, row, column) {
                    return column;
                }
            },
            legend: { //定义图例
                node: $('#legend'),
                items: [
                    ['a', 'available', '可选座位'],
//                    ['a', 'selected', '已选座位'],
                    ['a', 'unavailable', '已售座位'],
                    ['a', 'parentseats', '家长座位']
                ]
            },
            click: function () {
                return this.style();

//                if (this.status() == 'available') {
//                    sc.find('selected').status('available');
//                    return 'selected';
//                } else if (this.status() == 'selected') {
//                    return 'available';
//                } else {
//                    return this.style();
//                }
            }
        });

        if (aisle) {
            sc.get(aisle).status('aisles');
        }
        if (vip) {
            sc.get(vip).status('parentseats');
        }
        if (student_seat) {
            sc.get(student_seat).status('unavailable');
        }
        if (reserved_seats) {
            sc.get(reserved_seats).status('unavailable');
        }

    }


</script>


</body>
</html>